<!--
 * @Author: wangshuguang
 * @Date: 2022-10-18 17:21:55
 * @LastEditTime: 2022-10-27 15:56:26
 * @LastEditors: wangshuguang
 * @Description: 开户指引弹框
-->
<template>
  <van-dialog 
    v-model="dialogVis" 
    title="会员营销系统开户流程" 
    confirmButtonColor="#ffb72f"
    confirmButtonText="联系客服"
    @confirm='confirm'
    show-cancel-button>
    <div class="guideBox">
      <div class="step">
        <span>1</span>
        商户认证微信公众号+小程序
      </div>
      <div class="step">
        <span>2</span>
        商户开户并充值流量
      </div>
      <div class="step">
        <span>3</span>
        门店小程序装修搭建
      </div>
      <div class="step">
        <span>4</span>
        小程序上线
      </div>
      <a style="display:none;" ref="telphone" :href="'tel:'+ openAccountInfo.telPhone">打电话</a>
      <div class="tip">联系人工客服快速开通：<span>{{ openAccountInfo.telPhone }}</span></div>
    </div>
  </van-dialog>
</template>

<script>
export default {
  props:{
    value:{},
    openAccountInfo:{},
  },
  computed:{
    dialogVis:{
      get(){
        return this.value
      },
      set(val){
        this.$emit('input', val)
      }
    }
  },
  methods:{
    confirm(){
      console.log(`tel://${this.openAccountInfo.telPhone}`)
      try {
        const aPhone = this.$refs['telphone']
        aPhone.click()
      } catch (error) {
        window.location.href=  `tel://${this.openAccountInfo.telPhone}`
      }
    }
  }
}
</script>

<style lang="less" scoped>
.guideBox{
  font-size: 25px;
  .step{
    padding: 20px;
    span{
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
    }
  }
  .tip{
    text-align: center;
    padding: 20px 0;
    span{
      color: #ffb72f;
    }
  }
}
</style>